<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-form ref="addressInfo" :model="addressInfo" :rules="rules" label-width="100px">
          <el-form-item label="小区地址" prop="address">
            <el-input placeholder="请选择地址" v-model="addressInfo.address" disabled>
              <template slot="prepend">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}</template>
              <el-button slot="append" icon="el-icon-map" @click="showMap" type="primary">选择地址</el-button>
            </el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经度" prop="longitude">
                <el-input v-model="addressInfo.longitude" placeholder="请输入经度" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="latitude">
                <el-input v-model="addressInfo.latitude" placeholder="请输入纬度" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>

<!-- 百度地图位置选择 -->
    <BaiDuMap ref="bmapAddressSelect" @confirmMapAddress="confirmMapAddress"></BaiDuMap>

  </div>
</template>

<script>

import BaiDuMap from "@/components/baiduMapSelect/BaiDuMap.vue"

export default {
  data() {
    return {
      // 位置信息
      addressInfo: {},
      // 表单校验
      rules: {},
    };
  },
  components: {
    BaiDuMap,
  },
  methods: {
    /** 显示地图 */
    showMap() {
      this.$refs.bmapAddressSelect.show();
    },

    /** 确认地图地址 */
    confirmMapAddress(addressInfo) {
      this.addressInfo = addressInfo;
    },
  },
};
</script>

